<template>
  <el-dialog :title="`${articleForm.id ? '修改' : '新增'}面试技巧`" :visible="showAddDialog" width="50%" @close='handleClose'>
    <el-form ref="form" :model="articleForm" :rules="rules" label-width="100px">
      <el-form-item prop="title"  label="文章标题">
        <el-input v-model="articleForm.title"></el-input>
      </el-form-item>
      <el-form-item id="quillEditor" prop="articleBody" label="文章内容">
        <!-- 富文本框 -->
        <quill-editor
          style="height: 200px"
          v-model="articleForm.articleBody"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </el-form-item>
      <el-form-item prop="videoURL" label="视频地址">
        <el-input v-model="articleForm.videoURL"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add, update } from '@/api/hmmm/articles.js'

import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'AddArticles',
  components: {
    quillEditor
  },
  props: {
    showAddDialog: {
      type: Boolean,
      default: false
    },
    articleForm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 富文本配置项
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            ['image'] // 上传图片、上传视频
          ]
        },
        placeholder: '输入内容...'
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onEditorBlur () {}, // 失去焦点触发事件
    onEditorFocus () {}, // 获得焦点触发事件
    onEditorChange () {}, // 内容改变触发事件
    // 关闭弹窗
    handleClose () {
      this.$emit('closeAddDialog')
      this.$emit('removeArticleForm')
    },
    // 确认提交按钮
    handleSubmit () {
      this.$refs.form.validate(async (flag) => {
        if (!flag) return
        // 判断是新增还是修改
        if (this.articleForm.id) {
          await update(this.articleForm)
          this.$message.success('修改成功')
        } else {
          await add(this.articleForm)
          this.$message.success('添加成功')
        }
        this.$emit('add-articles')
        this.handleClose()
      })
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-dialog__footer {
    text-align: right;
  }
}

#quillEditor{
  margin-bottom: 80px;
}
</style>
